<style lang="stylus" scoped>
.tri-maker {
  background-image: radial-gradient(at 50.12650084919683% 29.779814474641885%, hsla(2.4324324324324325, 67.88990825688072%, 42.74509803921569%, 1) 0%, hsla(2.4324324324324325, 67.88990825688072%, 42.74509803921569%, 0) 100%), radial-gradient(at 54.145804263829774% 93.90983326895157%, hsla(146.35135135135133, 67.88990825688072%, 42.74509803921569%, 1) 0%, hsla(146.35135135135133, 67.88990825688072%, 42.74509803921569%, 0) 100%), radial-gradient(at 11.061322128983143% 23.597336745143572%, hsla(218.51351351351354, 67.88990825688072%, 42.74509803921569%, 1) 0%, hsla(218.51351351351354, 67.88990825688072%, 42.74509803921569%, 0) 100%);
  text-align: center;
  flex-direction: row;
  height: 100%;
}

.title
  margin-top 6px
  margin-bottom 2px
  line-height 20px
  font-size 15px
  font-weight bold
  color #fff
.desc
  line-height 20px
  font-size 12px
  color rgba(255, 255, 255, .6)
</style>

<template>

  <div :class="{
    'tri-maker': true,
    'tri-maker-small': widgetsSize === BookmarkSize.small,
    'tri-maker-medium': widgetsSize === BookmarkSize.medium,
    'tri-maker-large': widgetsSize === BookmarkSize.large,
  }" :style="{ backgroundColor: widgetsUndercoat}"  
     @click="handleClick">

    <div v-if="widgetsSize == BookmarkSize.small" style="font-size: 20px; color: #fff" @mouseenter="onMouseEnter" @mouseleave="onMouseleave">
      <div v-if="!showText" style="font-size: 33px;">
        <v-mdi name="mdi-lead-pencil"   :class="{small: widgetsSize === BookmarkSize.small}"/>
      </div>
      <div v-if="showText" style="width: 50px;height: 50px;">
        <div class="title" style="font-size: 10px;">
          <span  style="word-break:break-word;"> {{note.title.length==0?"好记性不如烂笔头": note.title.substring(0, 8)}}</span>
        </div>
      </div>
    </div>

    <div v-if="widgetsSize == BookmarkSize.medium " style="font-size: 20px; color: #fff">
      <div style="font-size: 40px;">
        <v-mdi name="mdi-lead-pencil"  :class="{
        small: widgetsSize === BookmarkSize.medium
      }"/>
      </div>
   
      <div class="desc">
        <p  style="white-space: pre-wrap;">{{note.title.length==0?"好记性不如烂笔头":note.title.substring(0, 8)}}</p>
      </div>
    </div>

    <div v-if=" widgetsSize == BookmarkSize.large" style="font-size: 20px; color: #fff">
      <div style="font-size: 40px;">
        <v-mdi name="mdi-lead-pencil"  :class="{
        small: widgetsSize === BookmarkSize.large
      }"/>
      </div>

      <div class="desc">
        <p  style="white-space: pre-wrap;">{{note.title.length==0?"好记性不如烂笔头":note.title.substring(0, 20)}}</p>
      </div>
    </div>

    <v-modal v-model="editModalVisible" :width="1200">
      <div style="padding: 20px">
        <note-editor :noteData="note" @confirm="handleDataChange" />
      </div>
    </v-modal>

  </div>
</template>

<script lang="ts">
import { bookmarkUpdateService } from '@database/services/bookmark-service';
import { ref, computed, onMounted, watch, nextTick } from 'vue';
import { splitInFirstColon } from '@/assets/ts/utils';
import { Bookmark, BookmarkSize } from '@database/entity/bookmark';
import { openBookmark } from '@/assets/ts/bookmark-utils';
import { Note } from '@database/entity/note';
import NoteEditor from './note-editor.vue';
export default {
  name: 'NoteComponent',
  components: { NoteEditor },
  props: {
    data: {
      type: Bookmark,
      default() {
        return new Bookmark({});
      },
    },
  },
  setup(props: { data: Bookmark; params: string }) {
    const widgetsSize = computed(() => props.data.size);
    const editModalVisible = ref(false);
    const defaultUndercoat = '#2B393D';
    const showText = ref(false as boolean);
    const widgetsUndercoat = computed(
      () => props.data.undercoat || defaultUndercoat
    );

    const note = ref({ title: '', content: props.data.value } as Note);
    watch(
      () => props.data.value,
      async (value: string | boolean) => {
        if (typeof value === 'string') {
          if (value) {
            const paramsSeprator = '&&|&&';
            const [title, content] = value.split(paramsSeprator);
            const [widgetsType, widgetsTitle] = splitInFirstColon(title);
            note.value.title = widgetsTitle;
            note.value.content = content;
            await nextTick();
          }
        }
      },
      {
        immediate: true,
      }
    );

    onMounted(() => {});

    return {
      note,
      showText,
      BookmarkSize,
      widgetsSize,
      widgetsUndercoat,
      editModalVisible,
      handleSelected(index: number) {
        openBookmark(props.data, {
          widgetsData: {
            defaultIndex: index,
          },
        });
      },
      handleClick() {
        editModalVisible.value = true;
      },
      handleDataChange(params: { undercoat: string; value: string }) {
        props.data.undercoat = params.undercoat;
        props.data.value = params.value;
        bookmarkUpdateService(props.data);
        editModalVisible.value = false;
      },
      onMouseEnter() {
        showText.value = true;
      },
      onMouseleave() {
        showText.value = false;
      }
    };
  },
};
</script>
